<template>
    <div v-for="item in goods" class="item">
        <img :src="item.imgUrl" alt="">
        <div style="width: 56vw">
            <span style="font-weight: bold;font-size: 14px">{{item.name}}</span><br>
            <span v-if="item.rankings" class="twelve golden">{{item.rankings}}</span>
            <span v-if="item.appraise" class="twelve orange">{{item.appraise}}</span>
            <div v-if="item.introduce" class="twelve lightgrey hide">{{item.introduce}}</div>
            <div v-else class="twelve lightgrey">原料：{{item.materials.join(',')}}</div>
            <span v-if="item.sale" class="twelve lightgrey">月售&nbsp{{item.sale}}</span>&nbsp
            <span v-if="item.acclaim" class="twelve lightgrey">好评率&nbsp{{item.acclaim}}</span>
            <div style="display: flex">
                <div class="twelve border">{{item.discount.join('|')}}</div>
            </div>
            <div style="width:100%;display: flex;position: relative">
                <p class="twelve" style="font-weight: bold;">￥</p>
                <span style="line-height: 36px;font-weight: bold;">{{item.price}}</span>
                <p v-if="item.cost" style="text-decoration:line-through" class="twelve lightgrey">￥{{item.cost}}</p>
                <div v-if="item.specs" class="button">
                    <input type="button" value="选规格">
                </div>
                <div v-else class="button">
                    <input type="button" value="+" @click="buy(item.id)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "DetailItem",
        props: {goods: Array},
        data() {
            return {
                selected: [],
                name: this.name
            }
        },
        methods: {
            buy(query) {
                this.selected.push(query)
                console.log(this.selected)
            }
        }
    }
</script>

<style scoped>
    .item {
        width: 78vw;
        margin-left: 2vw;
        display: flex;
    }

    .twelve {
        font-size: 12px;
    }

    .lightgrey {
        color: lightgrey;
    }

    .item > img {
        width: 22vw;
        height: 22vw;
    }

    .golden {
        color: #fcd81b;
    }

    .orange {
        color: orange;
    }

    .hide {
        white-space: nowrap;
        width: 57vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .border {
        border: 1px #fc3030 solid;
        line-height: 18px;
        border-radius: 5px;
        margin-right: 5px;
        color: #fc2929;
    }

    .button {
        position: absolute;
        right: 2vw;
        top: 8px
    }

    .button > input {
        border-radius: 10px;
        text-align: center;
        border: 0;
        background-color: lightskyblue;
        color: white;
    }
</style>